<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>首页 - 驴妈妈流立方</title>
		<meta name="description" content="overview &amp; stats" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrap.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/font-awesome/4.2.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery-ui.custom.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/assets/css/jquery.gritter.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${request.contextPath}/assets/fonts/fonts.googleapis.com.css" />
		<!-- BootstrapValidator -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/bootstrapValidator.min.css" />
		<link rel="stylesheet" href="${request.contextPath}/stylesheets/daterangepicker.css">
		<!-- ace styles -->
		<link rel="stylesheet" href="${request.contextPath}/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<link rel="stylesheet"  href="${request.contextPath}/stylesheets/daterangepicker.css">
	</head>
	
    <body class="no-skin" style="background-color: #FFF;">
		<div class="page-content">
			<div class="row">
                <div class="col-xs-12">
                    <div class="widget-box">
                        <div class="widget-header widget-header-small">
                            <h5 class="widget-title lighter">筛选条件</h5>
                        </div>
                        <div class="widget-body" style="background-color: #EFF3F8;">
                            <div class="widget-main">
								<input type = "hidden" id = "hiddenChoose" value ="${chooseTime!}" >
                                <form class="form-inline" id="searchForm" method="post" action="${request.contextPath}/repurchase/attributes">
                                    <div class="row widget-main">
                                        <div class="form-group">
                                            <label >选择推送时间</label>
											<select  class="chosen-select" tabindex="2"
													name="chooseTime" id="chooseTime">
											</select>
                                        </div>


                                        <div class="form-group">
                                            <button id="app_search" type="submit"  class="btn btn-pink btn-sm">
                                                <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                                Search
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
			<div class="row">
				<div class="col-xs-12">
					<div class="widget-box">
						<div class="widget-body">
						    <div class="widget-main row">
								<div class="col-xs-6">
									<div class="widget-box">
										<div class="widget-body">
											<h4 style="text-align: center;"></h4>
											<div id="chart1" style="width: 100%; height: 500px; margin: 0 auto;"></div>
										</div>
									</div>
								</div>
								<div class="col-xs-6" style="padding-left: 0">
									<div class="widget-box">
										<div class="widget-body">
											<h4 style="text-align: center;"></h4>
											<div id="chart2" style="width: 100%; height: 500px; margin: 0 auto;"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<script src="${request.contextPath}/assets/js/jquery.2.1.1.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootstrap.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery-ui.custom.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery.ui.touch-punch.min.js"></script>
		<script src="${request.contextPath}/assets/js/bootbox.min.js"></script>
		<script src="${request.contextPath}/assets/js/jquery.gritter.min.js"></script>
		<script src="${request.contextPath}/assets/js/spin.min.js"></script>
		<!-- ace scripts -->
		<script src="${request.contextPath}/assets/js/ace-elements.min.js"></script>
		<script src="${request.contextPath}/assets/js/ace.min.js"></script>
		<!-- validator scripts -->
		<script src="${request.contextPath}/assets/js/bootstrapValidator.min.js"></script>
		<!-- user scripts -->
		<script src="${request.contextPath}/assets/js/user/base.js"></script>
		<!-- ace settings handler -->
		<script src="${request.contextPath}/assets/js/ace-extra.min.js"></script>
		<!--ECharts-->
		<script type="text/javascript" src="${request.contextPath}/javascripts/echarts.js"></script>
		<script src="${request.contextPath}/assets/js/chosen.jquery.js"></script>
		<script type="text/javascript">
            $('.chosen-select').chosen({  allow_single_deselect : true});

            $('.chosen-select').trigger("liszt:updated");
            createtTimeLoad();
            function createtTimeLoad(){
                $.ajax({
                    url : '${request.contextPath}/repurchase/createTimeList',
                    type : "POST",
                    dataType:"json",
                    success:function(data) {
                    	var dataList = data.data;
                        html = '';
                        var chooseTime = $("#hiddenChoose").val();
                        for(var i=0 ; i< dataList.length; i++){
                            if (dataList[i] == chooseTime){
                                html += '<option value="' + dataList[i] + '" selected = "selected" >' + dataList[i] + '</option>';
                            }else{
                                html += '<option value="' + dataList[i] + '">' + dataList[i] + '</option>';
                            }

                        }
                        $("#chooseTime").html(html);
                        $('#chooseTime').chosen("destroy").chosen();

                    },
                    error:function(data) {
                    }
                });
            }
			// d3.select(self.frameElement).style("height", "1500px");
			var chartData1 = eval("${repurchaseChart1}");
			optionChart1 = {
			    backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
			        offset: 0,
			        color: '#f7f8fa'
			    }, {
			        offset: 1,
			        color: '#cdd0d5'
			    }]),
			    title: {
			        text: '上游复购率&下游复购率'
			    },
			    xAxis: {
			        splitLine: {
			            lineStyle: {
			                type: 'dashed'
			            }
			        },
			        name: '上游复购率(%)'
			    },
			    yAxis: {
			        splitLine: {
			            lineStyle: {
			                type: 'dashed'
			            }
			        },
			        scale: true,
			        name: '下游复购率(%)'
			    },
			   tooltip: {
			        padding: 10,
			        backgroundColor: '#222',
			        borderColor: '#777',
			        borderWidth: 1,
			        formatter: function (obj) {
			            var value = obj.value;
			            return value[3] + '(' + value[0] + '%,' + value[1] + '%)';
			        }
			    }, 
			    series: [{
			        name: '001',
			        data: chartData1,
			        type: 'scatter',
			        symbolSize: function (data) {
			            return data[2];
			        },
			        itemStyle: {
			            normal: {
                            label: {
                                show: true,
                                position: 'top',
                                formatter: function (obj) {
									return obj.data[3]
                                }
                            },
			                shadowBlur: 10,
			                shadowColor: 'rgba(25, 100, 150, 0.5)',
			                shadowOffsetY: 5,
			                color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
			                    offset: 0,
			                    color: 'rgb(129, 227, 238)'
			                }, {
			                    offset: 1,
			                    color: 'rgb(25, 183, 207)'
			                }])
			            }
			        }
			    }]
			};

			var bubbleRateDom1 = document.getElementById("chart1");
			var bubbleRatioCharts1 = echarts.init(bubbleRateDom1,"light");
			if (optionChart1 && typeof optionChart1 === "object") {
				bubbleRatioCharts1.setOption(optionChart1, true);
			}

			var chartData2 = eval("${repurchaseChart2}");
			optionChart2 = {
			    backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
			        offset: 0,
			        color: '#f7f8fa'
			    }, {
			        offset: 1,
			        color: '#cdd0d5'
			    }]),
			    title: {
			        text: '自品类复购率&总交叉复购率'
			    },
			    xAxis: {
			        splitLine: {
			            lineStyle: {
			                type: 'dashed'
			            }
			        },
			        name: '自品类复购率(%)'
			    },
			    yAxis: {
			        splitLine: {
			            lineStyle: {
			                type: 'dashed'
			            }
			        },
			        scale: true,
			        name: '总交叉复购率(%)'
			    },
			    tooltip: {
			        padding: 10,
			        backgroundColor: '#222',
			        borderColor: '#777',
			        borderWidth: 1,
			        formatter: function (obj) {
			            var value = obj.value;
			            return value[3] + '(' + value[0] + '%,' + value[1] + '%)';
			        }
			    }, 
			    series: [{
			        name: '002',
			        data: chartData2,
			        type: 'scatter',
			        symbolSize: function (data) {
			            return data[2];
			        },
			        itemStyle: {
			        	 normal: {
                             label: {
                                 show: true,
                                 position: 'top',
                                 formatter: function (obj) {
                                     return obj.data[3]
                                 }
                             },
			                 shadowBlur: 10,
			                 shadowColor: 'rgba(120, 36, 50, 0.5)',
			                 shadowOffsetY: 5,
			                 color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
			                     offset: 0,
			                     color: 'rgb(251, 118, 123)'
			                 }, {
			                     offset: 1,
			                     color: 'rgb(204, 46, 72)'
			                 }])
			             }
			        }
			    }]
			};

			var bubbleRateDom2 = document.getElementById("chart2");
			var bubbleRatioCharts2 = echarts.init(bubbleRateDom2,"light");
			if (optionChart2 && typeof optionChart2 === "object") {
				bubbleRatioCharts2.setOption(optionChart2, true);
			}
		</script>
	</body>
</html>